<!-- 中间件节点 -->
<template>
  <CoolDialog v-model="showDialog" :width="500" @close="close">
    <el-form
      :model="nodeConfigFrom"
      label-width="80px"
      ref="nodeConfigFormRef"
      :rules="rules"
    >
      <el-form-item :label="langMsg?.nodename || '节点名称'" prop="nodeName">
        <el-input
          v-model="nodeConfigFrom.nodeName"
          placeholder="请输入节点名称"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="中间件" prop="type">
        <el-select v-model="nodeConfigFrom.type" class="m-2" placeholder="请选择类型">
          <el-option
            v-for="item in selectOption.typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务器" prop="serverNodeList">
        <div class="param-list" v-for="(param, index) in nodeConfigFrom.serverNodeList">
          <el-row style="margin-bottom: 10px">
            <el-col :span="14">
              <el-input v-model="param.ip" :placeholder="langMsg?.ipaddress || 'IP地址'"
            /></el-col>
            <el-col :span="8" style="padding-left: 5px"
              ><el-input
                v-model="param.port"
                :placeholder="langMsg?.portnumber || '端口号'"
            /></el-col>
            <el-col :span="2">
              <div
                style="
                  height: 100%;
                  line-height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <el-icon
                  :size="20"
                  @click="nodeConfigFrom.serverNodeList.splice(index, 1)"
                >
                  <CircleClose />
                </el-icon>
              </div>
            </el-col>
          </el-row>
        </div>
        <div
          style="display: flex; width: 100%; justify-content: center; align-items: center"
        >
          <el-icon class="add-params" @click="addServer">
            <Plus />
          </el-icon>
        </div>
      </el-form-item>
      <el-form-item label="topic" prop="topic">
        <el-input
          v-model="nodeConfigFrom.topic"
          placeholder="请输入topic"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      <div style="margin-top: 30px; text-align: center">
        <el-button @click="onSaveAndBind(nodeConfigFormRef)">确定</el-button>
        <el-button @click="close">{{ langMsg?.cancel || "取消" }}</el-button>
      </div>
    </el-form>
  </CoolDialog>
</template>
<script setup lang="ts">
import { inject, onMounted, onUnmounted, reactive, ref } from "vue";
import { nodeTypeEnum, midType } from "../const";
import CoolDialog from "@/components/CoolDialog.vue";
// import { getChainNodeDetail} from '@/api/RuleEngine'
import { CircleClose, Plus } from "@element-plus/icons-vue";
const props = defineProps({
  modelValue: { type: String, default: "0" },
  clickNodeInfo: { type: Object, default: {} },
});
const emits = defineEmits(["update:modelValue", "saveConfiguration"]);
const apis: any = inject("apis");
const langMsg: any = inject("langMsg");
const showDialog = ref(false);
const selectOption = ref({ typeOptions: midType });
interface node {
  id?: string;
  nodeName?: string;
  type?: string;
  serverList?: Array<any>;
  topic?: string;
  serverNodeList?: Array<any>;
}
const nodeConfigFormRef = ref();
const rules = reactive({
  nodeName: [{ required: true, message: "请输入名称", trigger: "blur" }],
  type: [{ required: true, message: "请输入选择中间件", trigger: "blur" }],
  serverNodeList: [{ required: true, message: "请输入服务器信息", trigger: "blur" }],
  topic: [{ required: true, message: "请输入topic", trigger: "blur" }],
});
const addServer = () => {
  nodeConfigFrom.value.serverNodeList = [{}, ...nodeConfigFrom.value.serverNodeList];
};
const nodeConfigFrom: any = ref<node>({});
const onSaveAndBind = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      emits("saveConfiguration", {
        ...nodeConfigFrom.value,
        type: nodeTypeEnum.midNode,
        configuration: JSON.stringify({
          type: nodeConfigFrom.value.type,
          topic: nodeConfigFrom.value.topic,
          serverNodeList: nodeConfigFrom.value.serverNodeList,
        }),
      });
      reset();
    } else {
      console.log("error submit!", fields);
    }
  });
};
const reset = () => {
  nodeConfigFrom.value = { serverNodeList: [] };
  showDialog.value = false;
  emits("update:modelValue", 0);
};
const close = () => {
  reset();
};

onMounted(async () => {
  let data: any = {};
  if (props.clickNodeInfo.id) {
    let res = await apis?.getChainNodeDetail(props.clickNodeInfo.id);
    data = res.data.data || {};
  }
  nodeConfigFrom.value = { serverNodeList: [], ...data };
  showDialog.value = true;
});
onUnmounted(() => {
  reset();
});
</script>
<style scoped></style>
